<template>
  <div class="header">
    <div class="w-roof">
      <el-row type="flex" class="w-wrap-inner" justify="end">
        <el-col :span="14">
          <span style="padding:0 10px;">
            用户积分：
            <span style="color:#000;font-weight:bold;">***</span>
          </span>
          账号：{{storedata.username}}，账号ID：{{storedata.userid}}，身份：{{storedata.identity}}，角色：{{storedata.role}},
        </el-col>
        <el-col :span="10">
          <ul class="w-fr">
            <li class="avatar"></li>
            <li>
              <a target="_blank" class="link" href="#/mycenter">个人中心</a>
            </li>
            <li>
              <a @click="logout" href="javascript:;">退出</a>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <div class="w-header">
      <el-row type="flex" class="w-wrap-inner">
        <el-col :span="7">
          <a href="#/index" class="logo"></a>
        </el-col>
        <el-col :span="10">
          <div class="search">
            <el-popover
              placement="bottom-start"
              width="100%"
              trigger="manual"
              v-model="isPopoverShow"
              :content="conText"
            >
              <el-tree :data="resData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              <el-input
                slot="reference"
                @focus="showPopover(true)"
                @blur="showPopover(false)"
                @keyup.enter.native="onSearchClick"
                placeholder="关键字"
                v-model="input"
                class="input-with-select"
              >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
                <el-button slot="append" @click="onSearchClick">搜索</el-button>
              </el-input>
            </el-popover>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="w-nav w-nav-bt">
      <div class="w-wrap-inner">
        <nav>
          <div class="dt">
            <a>商品分类</a>
          </div>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import store from "@/store";
import { isRealNum, isMobile, isUserNo, getGwHeadImg } from "@/api/common";

import SimpleCropper from "@/components/SimpleCropper";
import userAvatar from "@/components/UserAvatar";
export default {
  components: {
    SimpleCropper,
    userAvatar
  },
  data() {
    return {
      storedata: {
        token: store.getters.token,
        userid: store.getters.userid,
        username: store.getters.username,
        identity: store.getters.identity,
        role: store.getters.role,
        routers: store.getters.routers,
        addRouters: store.getters.addRouters
      },
      isViewRightCodeShow: false, //是否显示切换按钮
      isPopoverShow: false, //弹出是否显示
      conText: "", //内容
      resData: [], //查询结果
      defaultProps: {
        id: "id",
        label: "name"
      },
      UserRole: {
        Me: 1, //会员
        Hr: 2, //人事
        Gw: 3, //顾问
        MM: 8, //手机会员(通过手机找到的会员)
        Co: 9 //公司
      },
      mobile: 0, //配合通过手机找到的会员
      input: "",
      pList: {},
      gwPhotoVisible: false,
      user_score: {},
      uploadParam: {
        fileType: "recruit", // 其他上传参数
        uploadURL: process.env.BASE_API + "/ChangeProfilePhoto", // 上传地址
        scale: 1 // 相对手机屏幕放大的倍数: 4倍
      },
      gw_headImage: "",
      isShowShadow: false,
      rightcode: {
        CrystalNetAgentReply_Calllog: false //水晶球来电记录
      }
    };
  },

  created() {
    var url = window.location.href;
  },
  computed: {
    ...mapGetters(["token"])
  },
  methods: {
    GetGwHeadImg() {
      return this.gw_headImage == "" ? this.avatar : this.gw_headImage;
    },
    handleNodeClick(nodeobj) {
      this.isPopoverShow = false;
      this.Goto(nodeobj.id, nodeobj.name);
    },
    showPopover(isShow) {
      if (this.input && isShow) {
        this.isPopoverShow = isShow;
      } else {
        this.isPopoverShow = false;
      }
    },
    onSearchClick() {},
    //---------------------------------

    logout() {
      this.$store.dispatch("LogOut").then(() => {
        location.reload();
      });
    },
    showShadow() {
      this.isShowShadow = true;
    },
    hideShadow() {
      this.isShowShadow = false;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.link:hover {
  color: #1896ff;
}
</style>
